<!DOCTYPE html>
<html lang="ch">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>注册</title>

		<link href="css/font-awesome.min.css" rel="stylesheet">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/templatemo-style.css" rel="stylesheet">

        <script src="./js/angular.min.js"></script>
        
        <style>
            .button-margin {
                margin-left: 30px;
                margin-right: 30px;
            }
            .register-textarea {
                width: 380px;
                max-width: 380px;
                margin-left: -15px;
            }
            .grey-color {
                color: grey;
            }
        </style>
	</head>

	<body class="light-gray-bg" ng-app="Regist" ng-controller="main">
		<div class="templatemo-content-widget templatemo-login-widget white-bg" style="margin-top: 10%;">
			<header class="text-center">
				<div class="square"></div>
				<h1>注册</h1>
			</header>
			<form name="regist" action="#" class="templatemo-login-form" method="post">
				<div class="row form-group">
					<div class="input-group">
						<div class="input-group-addon"><i class="fa fa-user fa-fw"></i></div>
						<input type="text" class="form-control" placeholder="账号" name="account" ng-model="account" ng-change="accountChange(account)" required />
					</div>
				</div>
				<div class="row form-group">
					<div class="input-group">
						<div class="input-group-addon"><i class="fa fa-key fa-fw"></i></div>
						<input type="password" class="form-control" placeholder="密码" name="password" ng-model="password" ng-change="passwordChange(password)" ng-blur="showAcceptPassword()" required />
					</div>             
				</div>
				<div ng-cloak ng-hide="isAcceptPasswordHide" class="row form-group">
					<div class="input-group">
						<div class="input-group-addon"><i class="fa fa-exclamation fa-fw"></i></div>
						<input type="password" class="form-control" placeholder="确认密码" name="acceptpassword" ng-model="acceptPassword" ng-change="acceptPasswordChange(acceptPassword)" required />
					</div>             
				</div>
				<div class="row form-group">
					<div class="input-group">
						<div class="input-group-addon">职业</div>
                        <select class="form-control text-center grey-color" name="job" ng-model="job">   
                            <option value="程序员">程序员</option>  
                            <option value="非程序员">非程序员</option>  
                        </select>                          
					</div>             
				</div>                    
				<div class="row form-group">
					<div class="input-group">
						<div class="input-group-addon">生日</div>
						<input type="date" class="form-control grey-color" placeholder="生日" name="birthday" ng-model="birthday" ng-change="birthdayChange(birthday)" />
					</div>             
				</div>                
				<div class="row form-group">
					<div class="col-lg-12 form-group text-center">
						<div class="margin-right-15 templatemo-inline-block">
							<input type="radio" name="gender" id="r1" value="男" ng-checked="true" ng-model="genderBoy">
							<label for="r1" class="font-weight-400"><span></span><i class="fa fa-mars fa-fw"></i></label>
						</div>
						<div class="margin-right-15 templatemo-inline-block">
							<input type="radio" name="gender" id="r2" value="女" ng-model="genderGirl">
							<label for="r2" class="font-weight-400"><span></span><i class="fa fa-venus fa-fw"></i></label>
						</div>
					</div>                
				</div>

                <div class="row form-group">	
					<div class="col-lg-12 form-group text-center">
						<div class="margin-right-15 templatemo-inline-block">
							<input type="checkbox" name="interest" id="c1" value="兴趣A">
							<label for="c1" class="font-weight-400"><span></span>兴趣A</label>
						</div>
						<div class="margin-right-15 templatemo-inline-block">
							<input type="checkbox" name="interest" id="c2" value="兴趣B">
							<label for="c2" class="font-weight-400"><span></span>兴趣B</label>
						</div>
						<div class="margin-right-15 templatemo-inline-block">
							<input type="checkbox" name="interest" id="c3" value="兴趣C">
							<label for="c3" class="font-weight-400"><span></span>兴趣C</label>
						</div>
						<div class="margin-right-15 templatemo-inline-block">
							<input type="checkbox" name="interest" id="c4" value="兴趣D">
							<label for="c4" class="font-weight-400"><span></span>兴趣D</label>
						</div>                    
					</div>
                    <div class="col-lg-12 form-group">
						<textarea class="form-control register-textarea" rows="3" 
                            placeholder="这个人很懒,什么都没有写~"
                            name="introduce"
                            ng-model="introduce" 
                            ng-change="introduceChange(introduce)"></textarea>
					</div>                   
				</div>                
				<div class="row form-group text-center">
					<button type="button" class="templatemo-blue-button button-margin " ng-click="doRegist()">注册</button>
					<button type="reset" class="templatemo-blue-button button-margin">重置</button>
				</div>
			</form>
		</div>
        
		<div ng-cloak ng-hide="isMsgHide" class="templatemo-content-widget templatemo-login-widget templatemo-register-widget white-bg">
            <p><strong>{{ registMsg }}</strong></p>
		</div>	
        
        <script>
            angular.module('Regist', [])
                .controller('main', function($scope) {
                    $scope.isMsgHide = true;
                    $scope.isAcceptPasswordHide = true;
                    $scope.registMsg = "";
                    $scope.accountChange = function(data) {
                        console.log(data);
                        if(!/.{2,8}/.test(data)) {
                            $scope.isMsgHide = false;
                            $scope.registMsg = "账号的长度在2-8内！";
                        } else $scope.isMsgHide = true;  
                    };
                    $scope.passwordChange = function(data) {
                        if(!/^[0-9a-zA-Z]{6,16}$/.test(data)) {
                            $scope.isMsgHide = false;
                            $scope.registMsg = "密码的长度在6-16内，允许数字和大小写字母！";                           
                        } else {
                            $scope.isMsgHide = true;
                            $scope.showAcceptPassword();
                        }
                    };
                    $scope.acceptPasswordChange = function(data) {
                        if($scope.password !== data) {
                            $scope.isMsgHide = false;
                            $scope.registMsg = "两次输入的密码不一致！";                            
                        } else $scope.isMsgHide = true;
                    }
                    $scope.birthdayChange = function(date) {
                        // date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
                    }
                    $scope.introduceChange = function(data) {
                        if(data.length > 64) {
                            $scope.isMsgHide = false;
                            $scope.registMsg = "你的简介太长啦~ 已经" + data.length + "字啦!";                            
                        } else $scope.isMsgHide = true;
                    }
                    $scope.showAcceptPassword = function() {
                        $scope.isAcceptPasswordHide = false;
                    }
                    $scope.doRegist = function() { 
                        var full = [ $scope.account, $scope.password, $scope.birthday, $scope.job ].every(function(e) {
                            return e && e !== "";
                        });
                        var accept = full && [ 
                            /.{2,8}/.test($scope.account), 
                            /^[0-9a-zA-Z]{6,16}$/.test($scope.password),
                            $scope.password === $scope.acceptPassword,
                            $scope.introduce && $scope.introduce.length <= 64 ].every(function(e) { return e; });
                        console.log(full, accept);
                        if(accept) {
                            
                        } else {
                            $scope.isMsgHide = false;
                            $scope.registMsg = "点击注册按钮前，请将表单填写完整！";                           
                        }
                    };
                });
        </script>                
	</body>
</html>